<template>
  <div id="auditrecordtable">
    <div class="auditrecordtable_header">
      <el-form ref="form" :model="query" :inline="true" label-width="80px">
        <el-form-item label="申请单号">
          <el-input placeholder="申请单号" v-model="query.apply_no"></el-input>
        </el-form-item>
        <el-form-item label="申请类型">
          <el-select v-model="query.scene_type" placeholder="请选择">
            <el-option
              v-for="item in optionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发起人">
          <el-select v-model="query.creator_id" filterable placeholder="请选择">
            <el-option
              v-for="item in creator_List"
              :key="item.id"
              :label="item.name"
              :value="item.id + ''"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属组织">
          <el-select
            v-model="query.branch_id"
            filterable
            placeholder="请选择所属组织"
          >
            <el-option
              v-for="item in reqWebsiteData"
              :key="item.id"
              :label="item.name"
              :value="item.id + ''"
            >
            </el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item size="mini">
          <el-button type="primary" icon="el-icon-search" @click="recordList"
            >查询</el-button
          >
          <el-button plain icon="el-icon-refresh-left" @click="resettingData"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="auditrecordtabler_button">
      <el-button type="primary" @click="deriveEd()">导出</el-button>
    </div>
    <div class="auditrecordtable_table">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        align="center"
        stripe
        @selection-change="handleSelectionChange"
        :max-height="maxheight"
      >
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column
          prop=""
          label="序号"
          width="50"
          type="index"
        ></el-table-column>
        <el-table-column
          prop="extra.apply_no"
          label="申请单号"
          width="180"
        ></el-table-column>
        <!-- <el-table-column prop="name" label="审批记录名称" width="180"></el-table-column> -->
        <el-table-column
          prop="apply_reason"
          label="申请原因"
          width="400"
        ></el-table-column>
        <el-table-column prop="status" label="审批状态" width="120">
          <template slot-scope="scope">
            {{ ["待审核", "审核通过", "审核驳回"][scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="scene_type" label="审批类型" width="120">
          <template slot-scope="scope">
            {{
              [
                "",
                "承运商付款申请",
                "报销申请",
                "备用金申请",
                "其他付款申请",
                "发票申请",
                "合同用章申请",
                "采购申请",
                "中通充值申请"
              ][scope.row.scene_type]
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="current_approver_id_name"
          label="当前审批人"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="last_editor_id_name"
          label="操作人"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="create_id_name"
          label="申请人"
          min-width="180"
        ></el-table-column>
        <el-table-column prop="create_time" label="申请时间" min-width="180">
          <template slot-scope="scope">
            <span v-time="scope.row.create_time"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="branch_id_name"
          label="所属组织"
          min-width="180"
        ></el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button
              data-tracker="P41-3"
              style="margin-right: 10px"
              type="text"
              plain
              size="mini"
              @click="handleClickEdit(scope.row, 'detail')"
              >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="auditrecordtable_page">
      <el-pagination
        background
        @size-change="handleSizeChangeObjpage"
        @current-change="handleSizeChangeObj"
        :current-page="query.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  record_stay_list,
  record_already_list,
  record_cpeople_list,
  record_initiate_list,
} from "@/api/paymentrequest";
import { reqHandlersList } from "@/api/waybill";
import {
  reqWebsiteList,
  stay_list_export,
  already_list_export,
  cpeople_list_export,
  initiate_list_export,
} from "@/api/customer";
export default {
  name: "thecarrierPaystable",
  props: ["invoice_body_belong"],
  // components: { TableHeader, SettinUp },
  data() {
    return {
      maxheight: "auto",
      query: {
        scene_type: "", //审核类型
        apply_no: "", //申请单号
        branch_id: "", //所属组织
        creator_id: "", //发起人
        create_time: {
          start_time: "",
          end_time: "",
        }, // // 创建时间/申请时间
        page: 1,
        page_size: 10,
      },
      tableData: [],
      totalPage: 0,
      optionList: [
        {
          value: "1",
          label: "承运商付款申请",
        },
        {
          value: "2",
          label: "报销申请",
        },
        {
          value: "3",
          label: "备用金申请",
        },
        {
          value: "4",
          label: "其他付款申请",
        },
        {
          value: "5",
          label: "发票申请",
        },
        {
          key: 6,
          value: "合同用章申请",
        },
        {
          key: 7,
          value: "采购申请",
        },
        {
          key: 8,
          value: "中通充值申请",
        },
      ],
      creator_List: [], //用户列表
      reqWebsiteData: [], //发票主体的,
      checkedRows: [], //选中的id
    };
  },
  mounted() {
    this.recordList();
    // 员工接口
    this.Pagecreator();
    // 所属组织
    this.reqWebsiteListFn();
  },
  methods: {
    recordList() {
      if (this.invoice_body_belong == 0) {
        var param = {
          ...this.query,
        };
        record_stay_list(param).then((res) => {
          this.tableData = res.data.data;
          if (this.tableData.length > 6) {
            //两排操作栏
            this.maxheight = document.documentElement.clientHeight - 265;
          } else {
            this.maxheight = "auto";
          }

          this.query.page = res.data.pagination.page;
          this.totalPage = res.data.pagination.total;
        });
      } else if (this.invoice_body_belong == 1) {
        var param = {
          ...this.query,
        };
        record_cpeople_list(param).then((res) => {
          this.tableData = res.data.data;
          if (this.tableData.length > 6) {
            //两排操作栏
            this.maxheight = document.documentElement.clientHeight - 265;
          } else {
            this.maxheight = "auto";
          }
          this.query.page = res.data.pagination.page;
          this.totalPage = res.data.pagination.total;
        });
      } else if (this.invoice_body_belong == 2) {
        var param = {
          ...this.query,
        };
        record_already_list(param).then((res) => {
          this.tableData = res.data.data;
          if (this.tableData.length > 6) {
            //两排操作栏
            this.maxheight = document.documentElement.clientHeight - 265;
          } else {
            this.maxheight = "auto";
          }
          this.query.page = res.data.pagination.page;
          this.totalPage = res.data.pagination.total;
        });
      } else if (this.invoice_body_belong == 3) {
        var param = {
          ...this.query,
        };
        record_initiate_list(param).then((res) => {
          this.tableData = res.data.data;
          if (this.tableData.length > 6) {
            //两排操作栏
            this.maxheight = document.documentElement.clientHeight - 265;
          } else {
            this.maxheight = "auto";
          }
          this.query.page = res.data.pagination.page;
          this.totalPage = res.data.pagination.total;
        });
      }
    },
    resettingData() {
      Object.assign(this.$data.query, this.$options.data().query);
      this.recordList();
    },
    handleSelectionChange(value) {
      this.checkedRows = value.map((item) => item.id);
      // console.log(this.checkedRows, " this.checkedRows");
    },
    handleSizeChangeObjpage(val) {
      this.query.page_size = val;
      this.recordList();
    },
    handleSizeChangeObj(val) {
      this.query.page = val;
      this.recordList();
    },
    handleClickEdit(val) {
      // scence_type: 用来判断审核记录的类型 1：承运商应付申请 ： 2：报销申请 3：备用金申请 4：付款申请 5 发票申请 callback_id 页面跳转后详情渲染的 id 是审核的id
      if (this.invoice_body_belong != 2) {
        if (val.scene_type == 1) {
          this.$router.push({
            name: "thecarrierPaysadd",
            query: {
              audit_id: val.id,
              id: val.callback_id,
              Type: 2,
              TageType: 3,
            },
          });
        } else if (val.scene_type == 2) {
          this.$router.push({
            name: "reimburSementadd",
            query: {
              Type: 2,
              id: val.callback_id,
              audit_id: val.id,
              TageType: 3,
            },
          });
        } else if (val.scene_type == 3) {
          // type 这个是 判断是 查看还是编辑 id 当行传递的 id Tage 表示的是类型

          this.$router.push({
            name: "reserveMoneyadd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 3,
              audit_id: val.id,
            },
          });
        } else if (val.scene_type == 4) {
          this.$router.push({
            name: "paymentReqAdd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 3,
              audit_id: val.id,
            },
          });
        } else if (val.scene_type == 5) {
          this.$router.push({
            name: "receiptManageadd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 3,
              audit_id: val.id,
            },
          });
        } else if (val.scene_type == 6) {
          this.$router.push({
            name: "useStampsAdd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 3,
              audit_id: val.id,
            },
          });
        }else if (val.scene_type == 7) {
          this.$router.push({
            name: "purChaseadd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 3,
              audit_id: val.id,
            },
          });
        }
        else if (val.scene_type == 8) {
          this.$router.push({
            name: "ztoRechargeAdd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 3,
              audit_id: val.id,
            },
          });
        }
      } else {
        if (val.scene_type == 1) {
          this.$router.push({
            name: "thecarrierPaysadd",
            query: {
              audit_id: val.id,
              id: val.callback_id,
              Type: 2,
              TageType: 4,
            },
          });
        } else if (val.scene_type == 2) {
          this.$router.push({
            name: "reimburSementadd",
            query: {
              Type: 2,
              id: val.callback_id,
              audit_id: val.id,
              TageType: 4,
            },
          });
        } else if (val.scene_type == 3) {
          // type 这个是 判断是 查看还是编辑 id 当行传递的 id Tage 表示的是类型

          this.$router.push({
            name: "reserveMoneyadd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 4,
              audit_id: val.id,
            },
          });
        } else if (val.scene_type == 4) {
          this.$router.push({
            name: "paymentReqAdd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 4,
              audit_id: val.id,
            },
          });
        } else if (val.scene_type == 5) {
          this.$router.push({
            name: "receiptManageadd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 4,
              audit_id: val.id,
            },
          });
        } else if (val.scene_type == 6) {
          this.$router.push({
            name: "useStampsAdd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 4,
              audit_id: val.id,
            },
          });
        }else if (val.scene_type == 7) {
          this.$router.push({
            name: "purChaseadd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 4,
              audit_id: val.id,
            },
          });
        }else if (val.scene_type == 8) {
          this.$router.push({
            name: "ztoRechargeAdd",
            query: {
              Type: 2,
              id: val.callback_id,
              TageType: 4,
              audit_id: val.id,
            },
          });
        }
      }
    },
    // 用户列表接口
    Pagecreator() {
      reqHandlersList().then((res) => {
        this.creator_List = res.data;
        // console.log(this.creator_List, "this.creator_List");
      });
    },
    reqWebsiteListFn() {
      let data = {
        branch_type: "3",
      };
      reqWebsiteList(data).then((res) => {
        if (res.code === 10000) {
          this.reqWebsiteData = res.data;
        }
      });
    },
    // 导出
    deriveEd() {
      // console.log("导出数据");
      if (this.invoice_body_belong == 0) {
        var param = {
          ...this.query,
          ids: this.checkedRows.map(Number),
        };
        stay_list_export(param).then((res) => {
          if (res.code === 10000) {
            this.reqUrl = "https://" + res.data.loaded_url;
            window.open(this.reqUrl);
            // this.loadingfalse = false;
          }
        });
      } else if (this.invoice_body_belong == 1) {
        var param = {
          ...this.query,
          ids: this.checkedRows.map(Number),
        };
        already_list_export(param).then((res) => {
          if (res.code === 10000) {
            this.reqUrl = "https://" + res.data.loaded_url;
            window.open(this.reqUrl);
            // this.loadingfalse = false;
          }
        });
      } else if (this.invoice_body_belong == 2) {
        var param = {
          ...this.query,
          ids: this.checkedRows.map(Number),
        };
        cpeople_list_export(param).then((res) => {
          if (res.code === 10000) {
            this.reqUrl = "https://" + res.data.loaded_url;
            window.open(this.reqUrl);
            // this.loadingfalse = false;
          }
        });
      } else if (this.invoice_body_belong == 3) {
        var param = {
          ...this.query,
          ids: this.checkedRows.map(Number),
        };
        initiate_list_export(param).then((res) => {
          if (res.code === 10000) {
            this.reqUrl = "https://" + res.data.loaded_url;
            window.open(this.reqUrl);
            // this.loadingfalse = false;
          }
        });
      }
    },
  },
};
</script>
<style scoped lang="less">
.auditrecordtable_page {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}

.table_creation {
  //   margin: 10px 0px 0px 0px;
  text-align: center;
}

.auditrecordtabler_button {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
</style>